<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-delete="{scope}">
				<delBtn @del="crud.delete(scope.row)"></delBtn>
			</template>
			<template #table-column-kftype="{scope}">
				微信
			</template>
			<template #table-column-icon="{scope}">
				<el-image style="width:72px;height:72px" :src="scope.row.icon" />
			</template>
			<template #table-column-app="{scope}">
				{{ filterplatForm(scope.row.app) }}
			</template>
			<template #table-column-serviceTime="{scope}">
				<div style="color:#666666">
					{{ scope.row.serviceDate }}
				</div>
				<div style="color:#999999">
					{{ scope.row.serviceTime }}
				</div>
			</template>
			<template #table-column-status="{scope}">
				<span v-if="scope.row.status == 1" style="color:#22DE48">启用</span>
				<span v-if="scope.row.status == 0" style="color:#A2A4BA">关闭</span>
			</template>
		</cl-crud>
		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import delBtn from '@/components/common/del-btn';
import serviceTime from './components/service-time';
import moment from 'moment';
import platform from '@/mixin/platform';
import { mapGetters } from 'vuex';
import { kfType } from '@/dict/index';
export default {
	data() {
		return {
			crud: null
		};
	},
	components: {
		delBtn
	},
	mixins: [platform],
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				return this.platformList.length == 0
					? val
					: this.platformList.filter(v => v.value == val)[0].label;
			};
		}
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.systemMenagement.customerService)
				.permission({
					update: true,
					delete: true,
					add: true
				})
				.set('dict', {
					label: {
						add: '添加客服+'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '客服账号',
							prop: 'account',
							align: 'center'
						},
						{
							label: '客服类型',
							prop: 'type',
							align: 'center'
						},
						{
							label: '客服图标',
							prop: 'icon',
							align: 'center'
						},
						{
							label: '所属平台',
							prop: 'app',
							align: 'center'
						},
						{
							label: '客服昵称',
							prop: 'nickName',
							align: 'center'
						},
						{
							label: '客服排序',
							prop: 'level',
							align: 'center',
							sortable: 'custom',
							emptyText: '0',
							'min-width': 100
						},
						{
							label: '服务时间',
							prop: 'serviceTime',
							align: 'center',
							width: 300
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					sync: true,
					props: {
						labelWidth: '100px'
					},
					items: [
						{
							label: '客服账号',
							prop: 'account',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入客服账号',
									maxlength: 20,
									clearable: true
								}
							},
							rules: {
								required: true,
								message: '客服账号'
							}
						},
						{
							label: '数据平台',
							prop: 'app',
							span: 13,
							component: {
								name: 'el-select',
								props: {
									placeholder: '请选择平台',
									filterable: true,
									'default-first-option': true,
									clearable: true
								},
								options: this.options
							},
							rules: {
								required: true,
								message: '数据平台'
							}
						},
						{
							label: '客服类型',
							prop: 'type',
							span: 13,
							component: {
								name: 'el-select',
								props: {
									filterable: true,
									'default-first-option': true,
									clearable: true
								},
								options: kfType
							},
							rules: {
								required: true,
								message: '客服类型'
							}
						},
						{
							label: '客服图标',
							prop: 'icon',
							component: {
								name: 'cl-upload'
							},
							rules: {
								required: true,
								message: '客服图标'
							}
						},
						{
							label: '客服昵称',
							prop: 'nickName',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入客服昵称',
									maxlength: 20,
									clearable: true
								}
							},
							rules: {
								required: true,
								message: '客服昵称'
							}
						},
						{
							label: '服务时间',
							prop: 'serviceTime',
							component: {
								name: 'service-time',
								data() {
									return {
										value1: '',
										value2: '',
										timeArr: []
									};
								},
								props: {
									value: [String]
								},
								mounted() {
									let val = this.value;
									if (val) {
										let time = val.split(',');
										let time2 = time.map(m => {
											return m.split('-');
										});
										time2.map(m => {
											m[0] = new Date('2020-4-04 ' + m[0]).toISOString();
											m[1] = new Date('2020-4-04 ' + m[1]).toISOString();
										});
										this.value1 = time2[0];
										this.value2 = time2[1];
									}
								},
								methods: {
									getStart(e) {
										let amStart = moment(e[0]).format('HH:mm');
										let amEnd = moment(e[1]).format('HH:mm');
										let time = amStart + '-' + amEnd;
										this.timeArr[0] = time;
										let txt = this.timeArr.join(',');
										this.$emit('input', txt);
									},
									getEnd(e) {
										let pmStart = moment(e[0]).format('HH:mm');
										let pmEnd = moment(e[1]).format('HH:mm');
										let time = pmStart + '-' + pmEnd;
										if (!this.timeArr[0]) {
											console.log(3223);
											this.timeArr.splice(0, 1);
											this.timeArr[0] = time;
										} else {
											this.timeArr[1] = time;
										}
										let txt = this.timeArr.join(',');
										this.$emit('input', txt);
									}
								},
								render() {
									return (
										<div>
											<el-time-picker
												is-range
												size="mini"
												v-model={this.value1}
												range-separator="至"
												start-placeholder="开始时间"
												end-placeholder="结束时间"
												placeholder="选择时间范围"
												on-change={this.getStart}
												format="HH:mm"
												style="margin-right:10px"></el-time-picker>
											<el-time-picker
												is-range
												size="mini"
												v-model={this.value2}
												range-separator="至"
												start-placeholder="开始时间"
												end-placeholder="结束时间"
												placeholder="选择时间范围"
												format="HH:mm"
												on-change={this.getEnd}></el-time-picker>
										</div>
									);
								}
							},
							rules: {
								required: true,
								message: '服务时间'
							}
						},
						{
							label: '工作时间',
							prop: 'serviceDate',
							component: {
								name: 'service-data',
								components: {
									serviceTime
								},
								data() {
									return {
										date: this.value
									};
								},
								props: {
									value: null
								},
								watch: {
									value(val) {
										this.date = val;
									}
								},
								methods: {
									getTime(val) {
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<div>
											<serviceTime
												dataTime={this.date}
												on-resolve={this.getTime}></serviceTime>
										</div>
									);
								}
							},
							rules: {
								required: true,
								message: '工作时间'
							}
						},
						{
							prop: 'remark',
							label: '备注',
							span: 15,
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea'
								}
							}
						},
						{
							prop: 'level',
							label: '商品排序：',
							value: 100,
							component: {
								name: 'ysqlevels',
								data() {
									return {
										ysqLevel: 100
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.ysqLevel = this.value;
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div style="display:flex">
											<el-input-number
												v-model={this.ysqLevel}
												controls-position="right"
												onInput={this.input}
												min={1}
												max={10000}></el-input-number>
											<span style="color:red;margin-left:10px">
												序号越大，排序越靠前
											</span>
										</div>
									);
								}
							}
						},
						{
							label: '启动状态',
							prop: 'status',
							component: {
								name: 'el-switch'
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					this.crud.setData(
						'upsert.items[prop:app].component.options',
						this.$store.state.topFilter.platList
					);
					if (isEdit) {
						this.crud.setForm('status', data.status == 1 ? true : false);
					}
				})
				.on('submit', async (isEdit, data, { next }) => {
					if (isEdit) {
						let status = data.status ? '1' : '0';
						delete data.updateTime;
						delete data.createTime;
						next({
							...data,
							status
						});
					} else {
						let status = data.status ? '1' : '0';
						next({
							...data,
							status
						});
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])

				.done();

			app.refresh();
		}
	}
};
</script>

<style lang="scss" scoped>
.disable {
	font-size: $font12;
}
</style>
